<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td,
        th {
            border: 1px solid #595959;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 3px;
            width: 30px;
            height: 25px;
        }

        th {
            background: #f0e6cc;
        }

        .even {
            background: #fbf8f0;
        }

        .odd {
            background: #fefcf9;

        }

        table {
            width: 80%;
            margin: 20px auto;
        }

        table tr:first-child {
            background-color: #ccc
        }

        /* n 是0开始 */
        table tr:nth-child(n+2) td:first-child {
            width: 140px;
            background-color: #f9f9f9;
        }

        table tr:nth-child(n+7) td:nth-child(3) {
            width: 140px;
            background-color: #f9f9f9;
        }

        table tr:nth-child(n+7) td:nth-child(2) {
            width: 500px;
        }


        /* js是索引，是从0开始的，css是1开始
        nth-child(2n) 匹配的是偶数 n是从0开始  2 4 6 8 10
        nth-child(n+10) 10 11 12 13 14 匹配是从10开始后面所有的
        nth-child(-n+5) 5 4 3 2 1 匹配是前面5个  */
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="3"></td>
                <td rowspan="5" style="width:160px;"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
        </tbody>
    </table>
</body>

</html>